<template>
  <div v-for="(item, index) in pageList" :key="index">
    <a-row class="header">
      <a-col :span="24">
        <BlueName :name="item.title" />
      </a-col>
    </a-row>
    <a-row class="count">
      <template v-for="(childItem, idx) in item.keys" :key="idx">
        <div class="image_card">
          <div class="icon_card" @click="jumpPage(childItem)">
            <span
              :class="['iconfont', moduleNameObj[childItem].iconName]"
              :style="{ fontSize: '50px', color: moduleNameObj[childItem].color }"
            ></span>
          </div>
          <p class="text" @click="jumpPage(childItem)">
            {{ moduleNameObj[childItem] && moduleNameObj[childItem].value }}
          </p>
        </div>
      </template>
    </a-row>
  </div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import BlueName from '@/components/blueName.vue'
// import { message } from "ant-design-vue";

const router = useRouter()

const pageList = ref<
  {
    title: string
    keys: string[]
  }[]
>([
  {
    title: '首页配置',
    keys: ['carousel', 'navType', 'carousel.page', 'share.page'],
  },
  {
    title: '系统配置',
    keys: ['basicConfig'],
  },
])
const jumpPage = (key: string) => {
  router.push({
    name: `systeam.${key}`,
  })
}
const moduleNameObj = ref<{
  [k: string]: {
    value: string
    status: boolean
    iconName: string
    color: string
  }
}>({
  navType: {
    value: '首页金刚区',
    status: false,
    iconName: 'icon-dilibiaozhichanpin',
    color: '#22ab7f',
  },
  carousel: {
    value: '首页轮播',
    status: false,
    iconName: 'icon-shouyelunbo',
    color: '#e23d1e',
  },
  basicConfig: {
    value: '基础配置',
    status: false,
    iconName: 'icon-jichushezhi',
    color: '#4e6bf9',
  },
  'carousel.page': {
    value: '首页弹窗',
    status: false,
    iconName: 'icon-zipingtai',
    color: '#4e6bf9',
  },
   'share.page': {
    value: '分享背景',
    status: false,
    iconName: 'icon-morentupianccccccpx',
    color: '#4e6bf9',
  },
})
</script>
<style lang="stylus" scoped>
.current {
  margin-bottom: 20px;
  cursor: pointer;
}

.header {
  padding: 14px 16px;
  background-color: #f8fafb;
  margin-bottom: 10px;
}

.count {
  padding: 14px 16px;
  margin-bottom: 10px;
}

.image_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 48px;
  cursor: pointer;
  position relative

  .text {
    margin-top: 10px;
    font-size: 14px;
    color: #787878;
    width 90px
    overflow hidden
    text-align center
    height 20px
    text-overflow ellipsis
  }
}

.icon_card {
  padding: 20px;
  background: #F4F8FA #FFFFFF;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
  border-radius: 6px;
}

.icon_card_footer {
  position absolute
  bottom 30px
  left 0
  width 100%
  background rgba(0, 0, 0, 0.4)
  padding 3px 0
  display flex
  border-radius: 0 0 6px 6px;
  align-items center
  justify-content center
}

.icon_card {
  padding: 20px;
  background: #F4F8FA #FFFFFF;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
  border-radius: 6px;
}
</style>
